<template>
  <div class="rightBodyContent">
    <div class="rightBodyContent-in">
      <div class="tab-body mb-10">
        <div class="tab-box">
          <!--          // 0待审核1通过2驳回3借出4归还 -->
<!--          0待审核1通过2驳回3完成 -->
          <el-radio-group v-model="radioStatus" size="small" @change="changeFn()">
            <el-radio-button label="all">全部({{ number ? number.all : 0 }})</el-radio-button>
            <el-radio-button :label="0">待审核({{ number ? number.apply : 0 }})</el-radio-button>
            <el-radio-button :label="1">已通过({{ number ? number.adopt : 0 }})</el-radio-button>
            <el-radio-button :label="2">已驳回({{ number ? number.reject : 0 }})</el-radio-button>
          </el-radio-group>
        </div>
        <div class="tab-box-list">
<!--          <el-input v-model="editForm.name" auto-complete="off" placeholder="填写证照名称" size="small"-->
<!--                    class="w-140"></el-input>-->
<!--          <el-button size="small" type="primary" plain class=" ml-10">搜索</el-button>-->
          <el-button size="small" plain @click="searchFn">刷新</el-button>
        </div>
      </div>
      <!--本体列表，数据 -->
      <div class="table-body">
        <div class="table-body-box">
          <el-table
              ref="multipleTable"
              :data="arryList"
              :stripe="tableStyle.tableStripe"
              :border="tableStyle.tableBorder"
              tooltip-effect="dark"
              header-cell-class-name="table-text-c"
              style="width: 100%">
           <el-table-column
               prop="name"
               label="公章名称"
               width="120"
               align="center">
               <template slot-scope="scope">
                {{ scope.row.seal.name?scope.row.seal.name:'--' }}
              </template>
           </el-table-column>
            <el-table-column
                prop="name"
                label="申请人"
                width="120"
                align="center"
                :ksy="1">
              <template slot-scope="scope">
                {{ scope.row.user?scope.row.user.realname:'--' }}
              </template>
            </el-table-column>
            <el-table-column
                prop="purpose"
                label="用途"
                align="center">
            </el-table-column>
            <el-table-column
                label="用章日期"
                align="center"
                prop="time">
            </el-table-column>
            <el-table-column
                prop="remark"
                label="补充说明"
                align="center">
            </el-table-column>
            <el-table-column
                label="用章文件"
                align="center">
              <template slot-scope="scope">
                <el-popover
                    placement="left-start"
                    title="用章文件"
                    width="250"
                    trigger="click"
                v-if="scope.row.file && scope.row.file.length">
                  <div class="tableline-li">
                    <div class="list" v-for="item in scope.row.file">
                      <preview_file :option="item" @showImg="showImg"></preview_file>
                    </div>
                  </div>
                  <el-button slot="reference" type="primary" plain size="mini">查看用章文件</el-button>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column
                prop="return_time"
                label="盖章文件"
                align="center">
              <template slot-scope="scope">
<!--                <viewerModle type="1" :imgSrc="scope.row.end_file" v-if="scope.row.end_file"></viewerModle>-->
                <ImagePreview :src="scope.row.end_file" width="40px" height="40px"></ImagePreview>
              </template>
            </el-table-column>
            <el-table-column
                prop="status"
                label="状态"
                align="center">
              <template slot-scope="scope">
<!--                0待审核1通过2驳回3完成-->
                <span v-if="scope.row.status==0">待审核</span>
                <span v-if="scope.row.status==1">已通过</span>
                <span v-if="scope.row.status==2" class="examinBtn">已驳回 <i>驳回说明：{{ scope.row.content }}</i></span>
                <span v-if="scope.row.status==3">已用章</span>
              </template>
            </el-table-column>
            <el-table-column
                label="操作"
                align="center"
                width="150"
                :ksy="10"
                v-if="radioStatus==0 || radioStatus=='all'">
              <template slot-scope="scope">
                <el-button type="primary" size="small" v-if="scope.row.status==0" @click="examinBtn(1,scope.row.id)">
                  通过
                </el-button>
                <el-button size="small" @click="examinBtn(2,scope.row.id)" class="ml-10" v-if="scope.row.status==0">驳回
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!--工具条 分页-->
      <el-col :span="24" class="toolbar">
        <el-pagination
            background
            layout="total, prev, pager, next"
            :total="page.total"
            :page-size="page.pagesize"
            @current-change="handleSizeChange">
        </el-pagination>
      </el-col>
    </div>
    <!--    预览-->
    <div style="position: fixed;top: -9999px">
      <viewer :images="studentPhoto" class="descimgBox">
        <img :src="studentPhoto[0]" class="viewerImg" ref="imgPrive">
      </viewer>
    </div>
  </div>
</template>

<script>
import {pagination, tableoption} from '@/utils/util.js'

export default {
  components: {},
  data() {
    return {
      studentPhoto: [],
      radioStatus: 'all',
      handleSelection: [],
      arryList: [], // 页面数据列表
      // 设置table样式
      tableStyle: tableoption,
      // 设置table页面分页所需
      page: {
        pageindex: pagination.pageIndex,
        pagesize: pagination.pageSize,
        total: pagination.total
      },
      editForm: {
        name: '', // 	整型 	必填 	1 	- 	名称
      },
      number: null
    }
  },
  created() {
    this.InitFn()
  },
  methods: {
    // 初始化
    InitFn() {
      // type 2 审核人员
      let option_ = {p: this.page.pageindex, type: 2, name: this.editForm.name}
      if (this.radioStatus !== 'all') {
        option_.status = this.radioStatus;
      }
      // <!--                // 0待审核1通过2驳回3借出4归还-->
      // <!--                申请通过 已驳回 待归还 已归还   -->
      this.$fetch(this.api.seal.apply_list, option_).then((response) => {
        if (response.code === 0) {
          for(let item of response.list.data){
            if(item.file){
              if(item.file.indexOf('[')!==-1){
                item.file = JSON.parse(item.file)
              }else{
                item.file = JSON.parse(JSON.stringify([{name:'文件1', src: item.file}]))
              }
            }
          }
          this.arryList = JSON.parse(JSON.stringify(response.list.data))
          this.page.total = response.list.total
          this.number = response.number
        } else {
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    showImg(option){
      console.log('option:', option)
      this.$set(this.studentPhoto, 0, option[0])
      setTimeout(()=>{
        this.$refs.imgPrive.click()
      }, 100)
    },
    examinBtn(type, id) {
      let that = this;
      if (type === 1) {
        this.$confirm('确认公章的审核, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          that.subimitExamin(type, id)
        }).catch(() => {

        });
      } else {
        this.$prompt('输入驳回说明', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(({value}) => {
          // value
          that.subimitExamin(type, id, value)
        }).catch(() => {

        });
      }
    },
    changeFn() {
      this.InitFn()
    },
    // 分页
    handleSizeChange(val) {
      this.page.pageindex = val
      this.InitFn()
    },
    // 搜索组件
    searchFn(option) {
      this.page.pageindex = 1
      this.InitFn()
    },
    subimitExamin(type, id, value) {
      let n = this;
      let option = {id: id, type: type}
      if (type === 2) {
        option.content = value;
      }
      this.$post(this.api.seal.examine, option).then((response) => {
        if (response.code === 0) {
          n.InitFn()
        } else {
        }
      }).catch((err) => {
        console.log(err)
      })
    }
  },
  mounted() {
  },
  // 缓存机制 end
}
</script>

<style scoped>

.wx-user-box-line img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 5px;
}

.wx-user-box-line {
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-wx {
  cursor: pointer;
  padding: 5px;
}

.btn-wx:hover {
  color: #1b8de5;
  text-decoration: underline;
}

.delet-wx {
  color: red;
  cursor: pointer;
}

.delet-wx:hover {
  text-decoration: underline;
}

.tab-body {
  display: flex;
  align-items: center;
}

.tab-box {
  flex: 1;
}

.tab-box-list {
  display: flex;
  align-items: center;
}

.examinBtn {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: red;
}

.examinBtn i {
  font-style: normal;
  color: #1b8de5;
  cursor: pointer;
  font-size: 12px;
}

</style>
